<template>
  <div id="app" style="background: #F3F3F3">
    <Head style="background: #fff">直播招聘</Head>
    <div class="liveBox">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="init"
      >
        <div class="liveCard" v-for="(item,index) of liveList" :key="index" @click="cardClick(item)">
          <!--  notice 为预告的背景色 -->
          <div class="liveTag" v-if="item.state == '已结束'">已结束</div>
          <div class="liveTag notice" v-if="item.state == '预告'">预告</div>
          <div class="liveBanner">
            <img :src="item.cover_image" alt="">
            <div class="liveStart" v-if="item.state == '直播中'">
              <div class="loader loader-7">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
              </div>
              <span class="liveInner">直播中</span>
            </div>
          </div>
          <div class="liveWord">
            <div class="liveTitle">{{ item.name }}</div>
            <div class="liveTime">直播时间：{{ item.live_start }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  name: 'index',
  data () {
    return {
      params: {
        page: 1,
        pagesize: 5,
        appkey: this.$store.state.config.live_app_key,
        appsecret: this.$store.state.config.live_app_secret
      },
      total: 0,
      loading: false,
      finished: false,
      liveList: []
    }
  },
  methods: {
    init () {
      http.get(api.liveList, this.params).then((res) => {
        const { code, data, message } = res
        if (code == '200') {
          this.liveList = [ ...this.liveList, ...data.items]
          this.total = data.total
          this.loading = false
          if (this.liveList.length >= this.total) {
            this.finished = true
          } else {
            this.params.page++
          }
        } else {
          this.$notify(message)
        }
      })
    },
    cardClick (item) {
      window.location.href = item.details_url
    }
  }
}
</script>

<style scoped>
  .liveBox{
    height: calc(100vh - 55px);
    overflow-y: auto;
    padding: 30px;
    box-sizing: border-box;
  }
  .liveCard{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
    margin-right: 26px;
    background: #FFFFFF;
    box-shadow: 0px 0px 21px 0px rgba(148, 148, 148, 0.3);
    border-radius: 10px;
  }
  .liveCard:nth-child(4n){
    margin-right: 0;
  }
  .liveTag{
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    padding: 0 10px;
    height: 26px;
    border-radius: 2px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    background: #5F5F5F;
    z-index: 10;
  }
  .notice{
    background: #00C561;
  }
  .liveBanner{
    width: 100%;
    height: 168px;
    overflow: hidden;
    position: relative;
  }
  .liveBanner img{
    width: 100%;
    height: 100%;
  }
  .liveStart{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 68px;
    height: 24px;
    background: url("../../assets/images/live-butBg.jpg") repeat 0 0 /100% 100%;
    border-radius: 0 50px 50px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .liveWord{
    width: 100%;
    padding: 26px 19px;
    box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;
  }
  .liveTitle{
    width: 100%;
    font-size: 18px;
    font-family: Microsoft YaHei;
    color: #000000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
  }
  .liveTime{
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: #999999;
    margin-top: 15px;
  }
  .liveInner{
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 6px;
  }
  .loader {
    position: relative;
    width: 10px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .loader-7 .line {
    width: 2px;
    position: absolute;
    border-radius: 5px;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
    background: -webkit-linear-gradient(top, #ffffff, #ffffff);
    background: linear-gradient(to bottom, #ffffff,#ffffff);
  }
  .loader-7 .line1 {
    left: 0;
    -webkit-animation: line-grow 0.5s ease alternate infinite;
    animation: line-grow 0.5s ease alternate infinite;
  }
  .loader-7 .line2 {
    left: 4px;
    -webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;
    animation: line-grow 0.5s 0.2s ease alternate infinite;
  }
  .loader-7 .line3 {
    left: 8px;
    -webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;
    animation: line-grow 0.5s 0.4s ease alternate infinite;
  }
  @-webkit-keyframes line-grow {
    0% {
      height: 0;
    }
    100% {
      height: 75%;
    }
  }
  @keyframes line-grow {
    0% {
      height: 0;
    }
    100% {
      height: 75%;
    }
  }

</style>
